<template>
	<view class="company-bind-container">
		<!-- 页面标题 -->
		<view class="page-title">绑定公司</view>

		<!-- 表单区域 -->
		<view class="form-container">
			<!-- 公司编码输入 -->
			<view class="form-item">
				<text class="label">公司编码 *</text>
				<input class="input" v-model="formData.companyCode" placeholder="请输入公司编码" maxlength="50" />
			</view>

			<!-- 搜索按钮 -->
			<view class="search-btn" @click="searchCompany" :disabled="isSearching">
				<text class="btn-text">{{ isSearching ? '搜索中...' : '搜索公司' }}</text>
			</view>
		</view>

		<!-- 公司信息展示区域 -->
		<view v-if="companyInfo" class="company-info-container">
			<view class="info-title">公司信息</view>

			<view class="info-item">
				<text class="info-label">公司名称：</text>
				<text class="info-value">{{ companyInfo.companyName }}</text>
			</view>

			<view class="info-item">
				<text class="info-label">公司编码：</text>
				<text class="info-value">{{ companyInfo.companyCode }}</text>
			</view>

			<view v-if="companyInfo.description" class="info-item">
				<text class="info-label">公司简介：</text>
				<text class="info-value">{{ companyInfo.description }}</text>
			</view>

			<view class="info-item">
				<text class="info-label">是否允许加入：</text>
				<text class="info-value">{{ companyInfo.allowJoin ? '允许' : '不允许' }}</text>
			</view>
		</view>

		<!-- 确认绑定按钮 -->
		<view v-if="companyInfo && !isBinding" class="bind-btn" @click="confirmBind" :disabled="isBinding">
			<text class="btn-text">确认绑定</text>
		</view>

		<!-- 绑定中提示 -->
		<view v-if="isBinding" class="binding-status">
			<text class="status-text">绑定中...</text>
		</view>
	</view>
</template>

<script>
	import {
	searchCompany,
	bindCompany
} from '@/https/company.js'

	export default {
		data() {
			return {
				// 表单数据
				formData: {
					companyCode: ''
				},
				// 公司信息
				companyInfo: null,
				// 搜索状态
				isSearching: false,
				// 绑定状态
				isBinding: false
			}
		},

		methods: {
			/**
			 * 表单验证
			 * @returns {boolean} 验证是否通过
			 */
			validateForm() {
				// 验证公司编码是否为空
				if (!this.formData.companyCode || this.formData.companyCode.trim() === '') {
					uni.showToast({
						title: '请输入公司编码',
						icon: 'none'
					})
					return false
				}

				return true
			},

			/**
			 * 搜索公司
			 */
			searchCompany: async function() {
				// 表单验证
				if (!this.validateForm()) {
					return
				}

				// 设置搜索状态
				this.isSearching = true

				try {
					// 调用搜索公司API
					const params = {
						companyCode: this.formData.companyCode.trim()
					}

					const res = await searchCompany(params)

					// 检查搜索是否成功
					if (res) {
						// 显示公司信息
						this.companyInfo = res
						uni.showToast({
							title: '搜索成功',
							icon: 'success'
						})
					} else {
						// 重置公司信息
						this.companyInfo = null
						// 显示失败提示
						uni.showToast({
							title: res.message || '未找到对应公司',
							icon: 'none'
						})
					}
				} catch (error) {
					// 重置公司信息
					this.companyInfo = null
					// 显示错误提示
					uni.showToast({
						title: error.message || '搜索失败，请检查网络连接',
						icon: 'none'
					})
					console.error('搜索公司出错:', error)
				} finally {
					// 重置搜索状态
					this.isSearching = false
				}
			},

			/**
			 * 确认绑定公司
			 */
			confirmBind: async function() {
		// 确认是否绑定
		uni.showModal({
			title: '确认绑定',
			content: `确定要绑定公司「${this.companyInfo.companyName}」吗？`,
			success: async (res) => {
				if (res.confirm) {
					// 设置绑定状态
					this.isBinding = true

					try {
						// 调用绑定公司接口
						const params = {
							CompanyCode: this.companyInfo.companyCode
						}

						const result = await bindCompany(params)
console.log(result)
						// 检查绑定结果
						if (result) {
							// 显示成功提示
							uni.showToast({
								title: result.message || '公司绑定成功',
								icon: 'success',
								duration: 1500
							})

							// 延迟返回上一页，确保用户看到成功提示
							setTimeout(() => {
								// 触发公司更新事件
								if (typeof uni !== 'undefined' && uni.$emit) {
									uni.$emit('company:updated')
								}
								// 返回上一页
								uni.navigateBack()
							}, 1500)
						} else {
							// 处理API返回的失败情况
							const errorMessage = result?.message || '绑定失败，请稍后重试'
							uni.showToast({
								title: errorMessage,
								icon: 'none',
								duration: 2000
							})
							this.isBinding = false
						}
					} catch (error) {
						// 显示错误提示
						let errorMessage = '绑定失败，请检查网络连接后重试'
						
						// 根据错误类型提供更具体的错误信息
						if (error.response) {
							// 服务器返回了错误响应
							errorMessage = error.response.data?.message || error.response.statusText || errorMessage
						} else if (error.request) {
							// 请求已发出但没有收到响应
							errorMessage = '网络连接失败，请检查您的网络'
						} else if (error.message) {
							// 其他类型的错误
							errorMessage = error.message
						}
						
						uni.showToast({
							title: errorMessage,
							icon: 'none',
							duration: 2000
						})
						console.error('绑定公司出错:', error)
						// 重置绑定状态
						this.isBinding = false
					}
				}
			}
		})
	}
		}
	}
</script>

<style scoped>
	.company-bind-container {
		padding: 30rpx;
		background-color: #f5f5f5;
		min-height: 100vh;
	}

	/* 页面标题 */
	.page-title {
		font-size: 40rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 40rpx;
		text-align: center;
	}

	/* 表单容器 */
	.form-container {
		background-color: #fff;
		border-radius: 20rpx;
		padding: 30rpx;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.03);
	}

	/* 表单项 */
	.form-item {
		margin-bottom: 30rpx;
	}

	/* 表单标签 */
	.label {
		display: block;
		font-size: 28rpx;
		color: #666;
		margin-bottom: 10rpx;
	}

	/* 输入框样式 */
	.input {
		width: 100%;
		height: 80rpx;
		border: 1rpx solid #eee;
		border-radius: 12rpx;
		padding: 0 20rpx;
		font-size: 30rpx;
		color: #333;
		box-sizing: border-box;
	}

	/* 搜索按钮 */
	.search-btn {
		background-color: #007aff;
		color: #fff;
		border-radius: 12rpx;
		height: 90rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 32rpx;
		font-weight: bold;
		box-shadow: 0 4rpx 12rpx rgba(0, 122, 255, 0.2);
	}

	/* 搜索按钮禁用状态 */
	.search-btn[disabled] {
		background-color: #ccc;
		box-shadow: none;
	}

	/* 按钮文本 */
	.btn-text {
		font-size: 32rpx;
	}

	/* 公司信息容器 */
	.company-info-container {
		margin-top: 30rpx;
		background-color: #fff;
		border-radius: 20rpx;
		padding: 30rpx;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.03);
	}

	/* 信息标题 */
	.info-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 20rpx;
		padding-bottom: 20rpx;
		border-bottom: 1rpx solid #eee;
	}

	/* 信息项 */
	.info-item {
		margin-bottom: 20rpx;
		line-height: 1.5;
	}

	/* 信息标签 */
	.info-label {
		font-size: 28rpx;
		color: #666;
		margin-right: 10rpx;
	}

	/* 信息值 */
	.info-value {
		font-size: 28rpx;
		color: #333;
		word-break: break-all;
	}

	/* 绑定按钮 */
	.bind-btn {
		margin-top: 50rpx;
		background-color: #007aff;
		color: #fff;
		border-radius: 12rpx;
		height: 90rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 32rpx;
		font-weight: bold;
		box-shadow: 0 4rpx 12rpx rgba(0, 122, 255, 0.2);
	}

	/* 绑定状态 */
	.binding-status {
		margin-top: 50rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 32rpx;
		color: #007aff;
	}
</style>